<template>
  <section>
    <search-box>
      <div class="search-box">
        dpvs_id:
        <div class="search-input">
          <el-input v-model="search_list.dpvs_id" ></el-input><span class="require-icon">*</span>
        </div>
        <div class="search-input m-left20">
          <el-button type="primary" @click="FnGetList(1)">查询</el-button>
        </div>
      </div>
    </search-box>
    <el-table :data="list" border stripe>
      <el-table-column prop="dpvs_id" label="dpvs id" min-width="130"></el-table-column>
      <el-table-column prop="vm_id" label="真实云主机id" min-width="130"></el-table-column>
      <el-table-column prop="vm_name" label="真实云主机名称" min-width="130"></el-table-column>
      <el-table-column prop="status" label="状态" min-width="130"></el-table-column>
      <el-table-column prop="public_ip" label="公网ip" min-width="130"></el-table-column>
      <el-table-column prop="private_ip" label="私网ip" min-width="130"></el-table-column>
      <el-table-column prop="customer_id" label="用户customerid" min-width="130"></el-table-column>
      <el-table-column prop="create_time" label="创建时间" min-width="130"></el-table-column>
      <el-table-column prop="update_time" label="更新时间" min-width="130"></el-table-column>
      <el-table-column label="操作" width="130">
        <template #default="scope">
          <el-button
                  type="text"
                  style="padding-left: 0;padding-right:0;"
                  :disabled="FnBtnDisabled('dvpsControl')"
                  @click="FnControl(scope.row)">控制台</el-button>
          <el-button
                  type="text"
                  style="padding-left: 0;padding-right:0;"
                  :disabled="FnBtnDisabled('dvpsPassword')"
                  @click="FnCheckPwd(scope.row)">查看密码</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-box">
      <el-pagination
              @current-change="handleCurrentChange"
              :current-page="page_index"
              :page-size="page_size"
              layout="total, prev, pager, next"
              :total="total">
      </el-pagination>
    </div>
    <el-dialog
      v-model="pwdDiaVisible"
      title="查看密码"
      width="500px"
      :before-close="beforeClose">
      <div class="config-title">
        <span class="font-weight-700">dpvs密码：</span>
        <span>{{ curPwd }}</span>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="beforeClose">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </section>
</template>

<script>
  import searchBox from '../../components/search-box.vue'
  import Service from '@/service/dvps'
  import {authBtnDisabled} from '@/utils/auth.js'
  export default {
    components: { searchBox },
    data() {
      return {
        search_list: {
          dpvs_id: ''
        },
        list: [],
        page_index: 1,
        page_size: 10,
        total: 0,
        curPwd: '', //dpvs密码
        pwdDiaVisible: false,
      }
    },
    methods: {
      FnGetList(page) {
        if(!this.search_list.dpvs_id) {
          this.$message.warning('请输入dpvs云服务器id')
          return
        }
        if(page) this.page_index = page
        let reqData = {
          dpvs_id: this.search_list.dpvs_id,
          page_index: this.page_index,
          page_size: this.page_size,
        }
        Service.get_dvps_vm_list(reqData).then(resData => {
          if(resData.code == "Success") {
            this.list = resData.data.dpvs_vms_list
            this.total = resData.data.dpvs_vms_count
          }
        })
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.FnGetList()
      },
      FnControl(row) {
        let url = window.location.origin + `/console/${row.vm_id}/centos/${row.vm_name}`
        window.open(url, '_blank')
      },
      FnBtnDisabled(key) {
        return authBtnDisabled(key, this.$route.meta.name)
      },
      FnCheckPwd(row) {
        Service.get_snat_vp_password({vm_id: row.vm_id}).then(res => {
          if(res.code === 'Success') {
            this.curPwd = res.data
            this.pwdDiaVisible = true
          }
        })
      },
      beforeClose() {
        this.pwdDiaVisible = false
      }
    },
    created() {
      if(this.$route.query.id) {
        this.search_list.dpvs_id = this.$route.query.id
        this.FnGetList()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .search-box {
    display: flex;
    align-items: center;
  }
  .m-left20 {
    margin-left: 40px;
  }
  .page-box {
    margin-top: 10px;
    text-align: right;
  }
  .search-input {
    width: 220px;
    margin-right: 20px;
    position: relative;
    .require-icon {
      position: absolute;
      right: 4px;
      top: 7px;
      color: #DA3B18;
      font-size: 20px;
    }
  }
</style>